<script setup lang="ts">
import { useAuthStore } from '@/store/modules/auth'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import Modal from '@/components/common/Modal.vue'
import LoginForm from '@/components/auth/LoginForm.vue'
import RegisterForm from '@/components/auth/RegisterForm.vue'

const router = useRouter()
const authStore = useAuthStore()

const showLoginModal = ref(false)
const showRegisterModal = ref(false)

const handleWrite = () => {
  if (authStore.user) {
    router.push('/write')
  } else {
    showLoginModal.value = true
  }
}

const handleLoginSuccess = () => {
  showLoginModal.value = false
  router.push('/write')
}

const handleRegisterSuccess = () => {
  showRegisterModal.value = false
  showLoginModal.value = true
}

const switchToRegister = () => {
  showLoginModal.value = false
  showRegisterModal.value = true
}

const switchToLogin = () => {
  showRegisterModal.value = false
  showLoginModal.value = true
}
</script>

<template>
  <div class="home">
    <section class="hero">
      <div class="hero-content">
        <h1>欢迎来到卫的技术博客</h1>
        <p>分享你的想法，发现精彩内容</p>
        <div class="hero-actions">
          <router-link to="/articles" class="primary-btn">浏览文章</router-link>
          <a href="#" @click.prevent="handleWrite" class="secondary-btn">开始写作</a>
        </div>
      </div>
    </section>
  </div>

  <!-- 登录对话框 -->
  <Modal :show="showLoginModal" title="登录" @close="showLoginModal = false">
    <LoginForm @success="handleLoginSuccess" @switch-to-register="switchToRegister" />
  </Modal>

  <!-- 注册对话框 -->
  <Modal :show="showRegisterModal" title="注册" @close="showRegisterModal = false">
    <RegisterForm @success="handleRegisterSuccess" @switch-to-login="switchToLogin" />
  </Modal>
</template>

<style scoped lang="scss">
.home {
  min-height: calc(100vh - 64px); // 减去header高度
  display: flex;
  flex-direction: column;
}

.hero {
  min-height: 80vh;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  margin: -2rem -1rem 0; // 抵消main-content的padding

  .hero-content {
    max-width: 800px;
    margin: 0 auto;
  }

  h1 {
    font-size: 3.5rem;
    font-weight: bold;
    margin-bottom: 1.5rem;
    line-height: 1.2;
  }

  p {
    font-size: 1.5rem;
    margin-bottom: 2rem;
    opacity: 0.9;
  }

  .hero-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;

    a {
      padding: 0.75rem 2rem;
      border-radius: 8px;
      font-weight: 500;
      text-decoration: none;
      transition: all 0.2s;
    }

    .primary-btn {
      background-color: white;
      color: #6366f1;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      }
    }

    .secondary-btn {
      border: 2px solid white;
      color: white;

      &:hover {
        background-color: rgba(255, 255, 255, 0.1);
        transform: translateY(-2px);
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .hero {
    h1 {
      font-size: 2.5rem;
    }

    p {
      font-size: 1.2rem;
    }
  }
}
</style>
